<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>乘车班次列表</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="__PUBLIC__/Css/my.css" rel="stylesheet">

    <script src="__PUBLIC__/Js/my.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<!--top bar row-->
<div class="container">
    <include file="Public:top" title="乘车班次列表"/>
    <div class="row" style="background-color: #f0f0f0;box-shadow: 2px 2px 3px gray;">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 sche-head-div" align="center" id="pre-date"
             onclick="onSelectDate('-1')" style="border-right: solid 1px gray;">
            <img src="__PUBLIC__/images/back-blue-25.png" id="pre-img" style="float: left">前一天
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 sche-head-div" align="center" id="show-date"
             style="border-right: solid 1px gray;">{$json.date}

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 sche-head-div" align="center" id="next-date"
             onclick="onSelectDate('1')">
            后一天<img src="__PUBLIC__/images/forward-blue-25.png" id="next-img" style="float: right">
        </div>
    </div>

    <!-- foreach goes here -->
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="sche-list">
            <empty name="json.data.list">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div style="font-size: 20px;margin-top: 30px;color:gray" align="center">
                            未找到任何班次...
                        </div>
                    </div>
                </div>
                <else/>
                <foreach name="json.data.list" item="schedule">
                    <div class="row" onclick="onScheduleItemClick(this)" id="{$schedule.schid}" style="padding:0px 5px 0px 5px;">
                        <!--0-->
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12  sche-list-item">
                            <!--00-->
                            <!--途径车站-->
                            <div class="row"><!--000-->
                                <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" style="padding-left: 0px;"><!--0000-->途径车站:{$schedule.linenodes}
                                </div>
                            </div>
                            <div class="row"><!--001-->
                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 sche-list-item-left">
                                    <!--0010-->
                                    <!-- 班次时间 -->
                                    <div class="row sche-list-item-left-top"  align="center"><!--00100-->
                                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" ><!--001000-->{$schedule.schtime}
                                        </div>
                                    </div>
                                    <!-- 班次号 -->
                                    <div class="row sche-list-item-left-bottom"  align="center"><!--00101-->
                                        <div class="col-xs-12 col-md-12  col-sm-12 col-lg-12">班次:{$schedule.schcode}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 sche-list-item-right" align="left">
                                    <!--0011-->
                                    <!-- 发车站 -->
                                    <div class="row"><!--00110-->
                                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">发车站:{$schedule.startstation}
                                        </div>
                                    </div>
                                    <!-- 到达站 -->
                                    <div class="row"><!--00111-->
                                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">到达站:{$schedule.endstation}
                                        </div>
                                    </div>
                                    <!-- 票信息 -->
                                    <div class="row"><!--00112-->
                                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">剩余票:{$schedule.ticketqty} &nbsp;车票价格:<span>￥{$schedule.fare}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </foreach>
            </empty>
        </div>
    </div>
</div>

<include file="Public:progress"/>

<div class="container" id="sche-content" hidden>
    <div class="row" onclick="onScheduleItemClick(this)" id="">
        <!--0-->
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 sche-list-item">
            <!--00-->
            <!--途径车站-->
            <div class="row"><!--000-->
                <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" style="padding-left: 0px;">
                </div>
            </div>
            <div class="row"><!--001-->
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 sche-list-item-left">
                    <!--0010-->
                    <!-- 班次时间 -->
                    <div class="row sche-list-item-left-top"  align="center"><!--00100-->
                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" ><!--001000-->
                        </div>
                    </div>
                    <!-- 班次号 -->
                    <div class="row sche-list-item-left-bottom"  align="center"><!--00101-->
                        <div class="col-xs-12 col-md-12  col-sm-12 col-lg-12">
                        </div>
                    </div>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 sche-list-item-right" align="left">
                    <!--0011-->
                    <!-- 发车站 -->
                    <div class="row"><!--00110-->
                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">
                        </div>
                    </div>
                    <!-- 到达站 -->
                    <div class="row"><!--00111-->
                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">
                        </div>
                    </div>
                    <!-- 票信息 -->
                    <div class="row"><!--00112-->
                        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--container ends here-->
<script type="text/javascript">
    //若是今天禁用前一天
    if('{$json.date}' == getCurrentDate()){
        unablePre();
    }
    /**
     *上一天，下一天点击事件处理
     * @param n
     */
    function onSelectDate(n) {
        showProgress();
        n = parseInt(n);
        var showingDate = new Date($("#show-date").html());
        showingDate.setDate(showingDate.getDate() + n);
        var month = showingDate.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var date = showingDate.getDate();
        date = date < 10 ? '0' + date : date;
        var showingDateStr = showingDate.getFullYear() + "-" + month + "-" + date;
        setCurrentShowingDate(showingDateStr);
        unablePreAndNext();
        var startStationCode = "{$json.startStationCode}";
        var endStationCode = "{$json.endStationCode}";
        var scheListDiv = document.getElementById("sche-list");
        $.ajax({
            type: "POST",
            data: "startStationCode=" + startStationCode + "&endStationCode=" + endStationCode + "&date=" + showingDateStr,
            dataType: "json",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            url: "{:U('Search/ajaxSche')}",
            success: function (json) {
                //alert('success');
                clearScheList()//清空原来的班次
                var scheList = json.data.list;
                if (scheList.length == 0) {
                    //alert(scheList.length);
                    scheListDiv.appendChild(getHintDiv("未找到任何班次..."));
                } else {
                    $.each(scheList, function (index, schedule) {
                        var div0 = document.createElement("div");
                        div0.setAttribute("class", "row");
                        div0.setAttribute("onclick", "onScheduleItemClick(this)");
                        div0.setAttribute("id", schedule.schid);
                        div0.setAttribute("style", "padding:0px 5px 0px 5px;");
                        var div00 = document.createElement("div");
                        div00.setAttribute("class", "col-xs-12 col-sm-12 col-md-12 col-lg-12 sche-list-item");
                        var div000 = document.createElement("div");
                        div000.setAttribute("class", "row");
                        var div0000 = getFullCol("途径车站:"+schedule.linenodes);
                        div0000.setAttribute("style","padding-left:0px");
                        div000.appendChild(div0000);
                        var div001 = document.createElement("div");
                        div001.setAttribute("class", "row");
                        var div0010 = document.createElement("div");
                        div0010.setAttribute("class", "col-xs-4 col-sm-4 col-md-4 col-lg-4 sche-list-item-left");
                        div0010.setAttribute("align", "center");
                        var div00100 = document.createElement("div");
                        div00100.setAttribute("class", "row sche-list-item-left-top");
                        div00100.appendChild( getFullCol(schedule.schtime));
                        var div00101 = document.createElement("div");
                        div00101.setAttribute("class", "row sche-list-item-left-bottom");
                        div00101.appendChild(getFullCol("班次:"+schedule.schcode));
                        var div0011 = document.createElement("div");
                        div0011.setAttribute("class", "col-xs-8 col-sm-8 col-md-8 col-lg-8 sche-list-item-right");
                        div0011.setAttribute("align", "left");
                        var div00110 = document.createElement("div");
                        div00110.setAttribute("class", "row");
                        div00110.appendChild(getFullCol("发车站:"+schedule.startstation));
                        var div00111 = document.createElement("div");
                        div00111.setAttribute("class", "row");
                        div00111.appendChild(getFullCol("到达站:"+schedule.endstation));
                        var div00112 = document.createElement("div");
                        div00112.setAttribute("class", "row");
                        div00112.appendChild(getFullCol("剩余票:" + schedule.ticketqty + "&nbsp;车票价格:<span>￥" + schedule.fare + "</span>"));

                        div0010.appendChild(div00100);
                        div0010.appendChild(div00101);
                        div0011.appendChild(div00110);
                        div0011.appendChild(div00111);
                        div0011.appendChild(div00112);
                        div001.appendChild(div0010);
                        div001.appendChild(div0011);
                        div00.appendChild(div000);
                        div00.appendChild(div001);
                        div0.appendChild(div00);

                        scheListDiv.appendChild(div0);
                    });
                }
                hideProgress();
                enablePreAndNext();
                //若是今天，禁用前一天
                if($("#show-date").html() == getCurrentDate()){
                    unablePre();
                }
            },
            error: function (msg) {
                scheListDiv.appendChild(getHintDiv("请求失败,请检查网络"));
            }
        });
    }


    function getFullCol(text){
        var div = document.createElement("div");
        div.setAttribute("class","col-xs-12 col-sm-12 col-md-12 col-lg-12");
        div.innerHTML = text;
        return div;
    }

    /**
     * 班次点击事件
     * */
    function onScheduleItemClick(item) {
        window.location.href = "{:U('Buy/confirm')}&schId=" + item.id;
    }
    /**
     * 设置当前显示日期
     * */
    function setCurrentShowingDate(showingDateStr) {
        $("#show-date").html(showingDateStr);
    }
    /**
     * 禁用上一天，下一天
     * */
    function unablePreAndNext() {
        unableNext();
        unablePre();
        $("#show-date").css("color", "gray");
    }
    function unableNext(){
        $("#next-date").attr("onclick", "");
        $("#next-date").css("color", "gray");
        $("#next-img").attr("src", "__PUBLIC__/images/forward-gray-25.png");
    }
    function enableNext(){
        $("#next-date").attr("onclick", "onSelectDate(1)");
        $("#next-date").css("color", "#3399ff");
        $("#next-img").attr("src", "__PUBLIC__/images/forward-blue-25.png");
    }
    function unablePre(){
        $("#pre-date").attr("onclick", "");
        $("#pre-date").css("color", "gray");
        $("#pre-img").attr("src", "__PUBLIC__/images/back-gray-25.png");
    }
    function enablePre(){
        $("#pre-date").attr("onclick", "onSelectDate(-1)");
        $("#pre-date").css("color", "#3399ff");
        $("#pre-img").attr("src", "__PUBLIC__/images/back-blue-25.png");
    }
    /**
     * 启用上一天，下一天
     * */
    function enablePreAndNext() {
        enableNext();
        enablePre();
        $("#show-date").css("color", "#3399ff");
    }

    /**
     * 清空原有班次
     * */
    function clearScheList() {
        $("#sche-list").html("");
    }

</script>
</body>
</html>